<template>
    <div class="add-banner">
        <el-form :model="bannerData" :rules="rules" ref="ruleFormRef">
            <el-form-item label="轮播图链接" prop="img">
                <el-input type="text" v-model="bannerData.img" />
            </el-form-item>
            <el-form-item label="轮播图提示" prop="alt">
                <el-input type="text" v-model="bannerData.alt" />
            </el-form-item>
            <el-form-item label="轮播图地址" prop="link">
                <el-input type="text" v-model="bannerData.link" />
            </el-form-item>
            <el-form-item>
                <el-button  position="center" type="primary" @click="submit">添加轮播图</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addBannerAPI } from '@/api/banner.js'
// import { ElNotification } from 'element-plus'
export default {
    data() {
        return {
            bannerData: {
                img: '',
                alt: '',
                link: ''

            },
            rules: {
                img: { required: true, message: "轮播图链接不能为空", trigger: "blur" },
                alt: { required: true, message: "轮播图提示不能为空", trigger: "blur" },
                link: { required: true, message: "轮播图地址不能为空", trigger: "blur" },
            }
        }
    },
    methods: {

        submit() {
            if(this.bannerData.img && this.bannerData.alt && this.bannerData.link !=='' ){
                addBannerAPI({
                img: this.bannerData.img,
                alt: this.bannerData.alt,
                link: this.bannerData.link

            })
            // .then((res) => {
                // console.log(res);
                // if (res.data.code == 200 ) {
                //     ElNotification({
                //         title: '成功',
                //         message: res.data.message,
                //         type: 'success',
                //     })
                // }
            // })
            }
           
        }
    }
}
</script>

<style lang="less" scoped>
.add-banner {
    width: 100%;
    height: 100%;
    margin-top: 5px;
}
</style>